(function() { "use strict";

app
    .directive("uiFullscreen", ["uiLoad", "$document", "$window", function(uiLoad, $document, $window) {
        return {
            restrict: "AC",
            template: '<i class="fa fa-expand fa-fw text"></i><i class="fa fa-compress fa-fw text-active"></i>',
            link: function(scope, el, attr) {
                el.addClass("hide");
                uiLoad.load("scripts/vendor/libs/screenfull.min.js").then(function() {
                    // disable on ie11
                    if (screenfull.enabled && !navigator.userAgent.match(/Trident.*rv:11\./)) {
                        el.removeClass("hide");
                    }

                    el.on("click", function() {
                        var target;
                        attr.target && ( target = $(attr.target)[0] );
                        screenfull.toggle(target);
                    });
                    $document.on(screenfull.raw.fullscreenchange, function() {
                        if (screenfull.isFullscreen) {
                            el.addClass("active");
                        }
                        else {
                            el.removeClass("active");
                        }
                    });
                });
            }
        };
    }]);

})();